const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
//引入插件，不需要自己再复制引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

//指定入口，出口（文件夹+文件名）
module.exports = {
    //没有指定打包模式，会提示警告。
    //The 'mode' option has not been set, webpack will fallback to 'production' for this value.
    //打包模式：1.生产模式production，代码压缩更极致；2.开发模式development
    mode: "production",
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),//文件夹
        filename: 'bundle.js'//文件名
    },
    module: {
        rules: [
            {
                test: /\.css$/i,//正则表达式：以css结尾且不区分大小写
                use: [MiniCssExtractPlugin.loader, 'css-loader']//顺序从右往左且不能乱
            },
            {
                test: /\.less$/i,//下载less和less-loader两个插件
                use: ['style-loader', 'css-loader', 'less-loader']//顺序从右往左且不能乱
            },
            {
                test: /\.(je?pg|png|gif|svg|webp)$/i,
                type: "asset",
                generator: { filename: 'image/[hash:20][ext]' }
                //对图片的2种处理方案：小于8KB转base64字符串到js里, 大于8KB输出文件到dist目录下（支持自定义文件名）
                //图片转base64打包进js中:好处是减少浏览器发送的请求次数, 读取图片速度快;坏处是图片过大, 转base64占空间会多33.5%左右，导致文件体积增大，得不偿失
            },
            {
                test: /\.(eot|ttf|woff|svg|woff2)$/i,
                type: "asset/resource",
                generator: { filename: 'font/[name].[hash:6][ext]' }
            }, {
                test: /\.js$/,
                exclude: /node_modules/,//排除node_modules中的降级，因为node_modules是降级好的
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']//指明降级规则
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new MiniCssExtractPlugin({
            // 对输出的css文件进行重命名
            filename: 'css/built.css'
        })
    ],
    devServer: {
        port: 3000,//端口
        open: true//自动打开浏览器
    }

}

